/**
 * Created by xiangjiayu on 2017/8/5.
 * 职位/会员管理
 */
import React from "react";
import {
    Button,
    Checkbox,
    Col,
    DatePicker,
    Icon,
    Input,
    Modal,
    Popconfirm,
    Radio,
    Row,
    Select,
    Steps,
    Table,
    Tooltip,
    Tree
} from "antd";
import MyIcon from "../../components/common/MyIcon/MyIcon";
import data from "./data";

//常用组件引用
const ButtonGroup = Button.Group;       //组合按钮
const Option = Select.Option;           //下拉框
const {MonthPicker, RangePicker} = DatePicker;//日历
const Step = Steps.Step;                //步骤条
const Search = Input.Search;    //搜所框
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const TreeNode = Tree.TreeNode;
const confirm = Modal.confirm;

export default class Member extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Modalshouquan: false,
      Modalmemberadd: false,
      Modalmemberedit:false,
      Modalmembercaozuo:false,
    };
  }
  componentDidMount(){

  }
  showModalshouquan(Modalshouquan) {
    this.setState({Modalshouquan});
  }
  showModalmemberadd(Modalmemberadd) {
    this.setState({Modalmemberadd});
  }
  showModalmemberedit(Modalmemberedit) {
    this.setState({Modalmemberedit});
  }
  showModalmembercaozuo(Modalmembercaozuo) {
    this.setState({Modalmembercaozuo});
  }
  onRightClick = (event,node) => {
    event.node.onMouseEnter=this._leftmember(event);
  }
  _leftmember = (event)=>{
    let that = this;
    var p = document.createElement("p");
    var a_add = document.createElement("a");
    var a_delete = document.createElement("a");
    var a_edit = document.createElement("a");

    a_add.className="anticon anticon-plus-square-o";
    a_edit.className="MyIcon edit-o";
    a_delete.className="anticon anticon-minus-square-o";

    a_add.id="add";
    a_edit.id="edit";
    a_delete.id="delete";

    p.append(a_add,a_edit,a_delete);

    if(event.event.currentTarget.querySelector('p')){
      var el = event.event.currentTarget.childNodes[1];
      el.parentNode.removeChild(el);
    }else{
      event.event.currentTarget.appendChild(p);
    }
    document.getElementById('add').onclick = function () {
      that.showModalmemberadd(true);
    }
  }
  render() {
    let that = this;
    let memberList = data.memberListTable;
    let {sortedInfo, filteredInfo} = this.state;
    sortedInfo = sortedInfo || {};
    filteredInfo = filteredInfo || {};
    const columns = [
      {
        title: '客户姓名',
        dataIndex: 'name',
        className: 'ant-table-th-center',
        key: 'name'
      }, {
        title: '手机号码',
        dataIndex: 'phone',
        className: 'ant-table-th-center',
        key: 'phone'
      }, {
        title: '职位',
        dataIndex: 'position',
        className: 'ant-table-th-center',
        key: 'position'
      }, {
        title: '职位',
        dataIndex: 'function',
        className: 'ant-table-th-center',
        key: 'function'
      }, {
        title: '性别',
        dataIndex: 'age',
        className: 'ant-table-th-center',
        key: 'age'
      }, {
        title: '最近登录时间',
        dataIndex: 'time',
        key: 'Time',
        className: 'ant-table-th-center'
      }, {
        title: '操作',
        dataIndex: 'operation',
        key: 'operation',
        fixed: 'right',
        width: 150,
        render: () => {
          return (
            <div className="table-a-cont">
              <a href="javascript:void(0)">编辑</a>
              <Popconfirm title="确定要删除?">
                <a href="javascript:void(0)">删除</a>
              </Popconfirm>
              <a href="javascript:void(0)" onClick={() => this.showModalshouquan(true)}>授权</a>
              <Popconfirm title="确定要禁用?">
                <a href="javascript:void(0)">禁用</a>
              </Popconfirm>
            </div>
          )
        },
      }];
    const pagination = {
      // total: this.state.tDate.length,
      total: 20,
      showSizeChanger: true,
    }
    function showConfirm() {
      confirm({
        title: '确定要删除职位?',
        content: '',
        maskClosable:false,
        onOk() {
        },
        onCancel() {
        },
      });
    }
    return (
      <div>
        <h3 className="title-h3">职位会员管理</h3>
        <div className="organize">
          <Row gutter={16}>
            <Col span={6}>
              <div className="posi-mem-left" id="treeNode">
                <Tree
                  checkable
                  //showLine
                  defaultExpandedKeys={['南京市家庭服务协会']}
                  onRightClick={this.onRightClick}
                >
                  <TreeNode title="南京市家庭服务协会" key="南京市家庭服务协会">
                    <TreeNode title="会长" key="会长">
                      <TreeNode title="秘书长" key="秘书长"/>
                      <TreeNode title="副会长" key="副会长">
                        <TreeNode title="理事" key="理事">
                          <TreeNode title="会员" key="会员"/>
                        </TreeNode>
                      </TreeNode>
                    </TreeNode>
                    <TreeNode title="专委会" key="专委会">
                      <TreeNode title="母婴" key="母婴"/>
                      <TreeNode title="培训" key="培训"/>
                    </TreeNode>
                  </TreeNode>
                </Tree>
                <p className="treenodo-beizhu">
                  备注：右击职位可对其进行操作!
                </p>
                {/*<ul className="ant-tree" role="tree-node" unselectable="true">*/}
                  {/*<li className="">*/}
                    {/*<div className="li-div">*/}
                      {/*<span className="ant-tree-switcher ant-tree-noline_open"></span>*/}
                      {/*<span*/}
                        {/*className="ant-tree-checkbox ant-tree-checkbox-checked">  /!*ant-tree-checkbox-checked    选中状态加*!/*/}
                        {/*<span className="ant-tree-checkbox-inner"></span>*/}
                      {/*</span>*/}
                      {/*<span title="南京市家庭服务协会"*/}
                            {/*className="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open">*/}
                        {/*<span className="ant-tree-title">南京市家庭服务协会</span>*/}
                      {/*</span>*/}
                      {/*<span className="caozuo">*/}
                        {/*<Icon type="plus-square-o" onClick={() => this.showModalmemberadd(true)}/>*/}
                        {/*<Icon type="minus-square-o" onClick={showConfirm}/>*/}
                        {/*<span onClick={() => this.showModalmemberedit(true)}><MyIcon type="edit-o"/></span>*/}
                      {/*</span>*/}
                    {/*</div>*/}
                    {/*<ul className="ant-tree-child-tree ant-tree-child-tree-open" data-expanded="true">*/}
                      {/*<li className="">*/}
                        {/*<div className="li-div">*/}
                          {/*<span className="ant-tree-switcher ant-tree-noline_close"></span>*/}
                          {/*<span*/}
                            {/*className="ant-tree-checkbox ant-tree-checkbox-indeterminate"> /!*ant-tree-checkbox-indeterminate    选中一个以上但是没有全部选中*!/*/}
                            {/*<span className="ant-tree-checkbox-inner"></span>*/}
                          {/*</span>*/}
                          {/*<span title="会长"*/}
                                {/*className="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close">*/}
                            {/*<span className="ant-tree-title">会长</span>*/}
                          {/*</span>*/}
                          {/*<span className="caozuo">*/}
                            {/*<Icon type="plus-square-o" onClick={() => this.showModalmemberadd(true)}/>*/}
                            {/*<Icon type="minus-square-o" onClick={showConfirm}/>*/}
                            {/*<span onClick={() => this.showModalmemberedit(true)}><MyIcon type="edit-o"/></span>*/}
                          {/*</span>*/}
                        {/*</div>*/}
                        {/*<ul className="">*/}
                          {/*<li className="">*/}
                            {/*<div className="li-div">*/}
                              {/*<span className="ant-tree-switcher ant-tree-noline_noop"></span>  /!*ant-tree-noline_noop   展开的最后一项*!/*/}
                              {/*<span className="ant-tree-checkbox">*/}
                                {/*<span className="ant-tree-checkbox-inner"></span>*/}
                              {/*</span>*/}
                              {/*<span title="专委会"*/}
                                    {/*className="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close">*/}
                                {/*<span className="ant-tree-title">秘书长</span>*/}
                              {/*</span>*/}
                              {/*<span className="caozuo">*/}
                                {/*<Icon type="plus-square-o" onClick={() => this.showModalmemberadd(true)}/>*/}
                                {/*<Icon type="minus-square-o" onClick={showConfirm}/>*/}
                                {/*<span onClick={() => this.showModalmemberedit(true)}><MyIcon type="edit-o"/></span>*/}
                              {/*</span>*/}
                            {/*</div>*/}
                          {/*</li>*/}
                          {/*<li className="">*/}
                            {/*<div className="li-div">*/}
                              {/*<span className="ant-tree-switcher ant-tree-noline_close"></span>*/}
                              {/*<span className="ant-tree-checkbox">*/}
                                {/*<span className="ant-tree-checkbox-inner"></span>*/}
                              {/*</span>*/}
                              {/*<span title="副会长"*/}
                                    {/*className="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close">*/}
                                {/*<span className="ant-tree-title">副会长</span>*/}
                              {/*</span>*/}
                              {/*<span className="caozuo">*/}
                                {/*<Icon type="plus-square-o" onClick={() => this.showModalmemberadd(true)}/>*/}
                                {/*<Icon type="minus-square-o" onClick={showConfirm}/>*/}
                                {/*<span onClick={() => this.showModalmemberedit(true)}><MyIcon type="edit-o"/></span>*/}
                              {/*</span>*/}
                            {/*</div>*/}
                            {/*<ul className="ant-tree-child-tree ant-tree-child-tree-open" data-expanded="true">*/}
                              {/*<li>*/}
                                {/*<div className="li-div">*/}
                                  {/*<span className="ant-tree-switcher ant-tree-noline_close"></span>*/}
                                  {/*<span className="ant-tree-checkbox">*/}
                                {/*<span className="ant-tree-checkbox-inner"></span>*/}
                              {/*</span>*/}
                                  {/*<span title="理事"*/}
                                        {/*className="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close">*/}
                                {/*<span className="ant-tree-title">理事</span>*/}
                              {/*</span>*/}
                                  {/*<span className="caozuo">*/}
                                {/*<Icon type="plus-square-o" onClick={() => this.showModalmemberadd(true)}/>*/}
                                {/*<Icon type="minus-square-o" onClick={showConfirm}/>*/}
                                {/*<span onClick={() => this.showModalmemberedit(true)}><MyIcon type="edit-o"/></span>*/}
                              {/*</span>*/}
                                {/*</div>*/}
                                {/*<ul className="ant-tree-child-tree ant-tree-child-tree-open" data-expanded="true">*/}
                                  {/*<li>*/}
                                    {/*<div className="li-div">*/}
                                      {/*<span className="ant-tree-switcher ant-tree-noline_noop"></span>*/}
                                      {/*<span className="ant-tree-checkbox">*/}
                                {/*<span className="ant-tree-checkbox-inner"></span>*/}
                              {/*</span>*/}
                                      {/*<span title="会员"*/}
                                            {/*className="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close">*/}
                                {/*<span className="ant-tree-title">会员</span>*/}
                              {/*</span>*/}
                                      {/*<span className="caozuo">*/}
                                {/*<Icon type="plus-square-o" onClick={() => this.showModalmemberadd(true)}/>*/}
                                {/*<Icon type="minus-square-o" onClick={showConfirm}/>*/}
                                {/*<span onClick={() => this.showModalmemberedit(true)}><MyIcon type="edit-o"/></span>*/}
                              {/*</span>*/}
                                    {/*</div>*/}
                                  {/*</li>*/}
                                {/*</ul>*/}
                              {/*</li>*/}
                            {/*</ul>*/}
                          {/*</li>*/}
                          {/*<li className="">*/}
                            {/*<div className="li-div">*/}
                              {/*<span className="ant-tree-switcher ant-tree-noline_close"></span>*/}
                              {/*<span className="ant-tree-checkbox">*/}
                                {/*<span className="ant-tree-checkbox-inner"></span>*/}
                              {/*</span>*/}
                              {/*<span title="专委会"*/}
                                    {/*className="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close">*/}
                                {/*<span className="ant-tree-title">专委会</span>*/}
                              {/*</span>*/}
                              {/*<span className="caozuo">*/}
                                {/*<Icon type="plus-square-o" onClick={() => this.showModalmemberadd(true)}/>*/}
                                {/*<Icon type="minus-square-o" onClick={showConfirm}/>*/}
                                {/*<span onClick={() => this.showModalmemberedit(true)}><MyIcon type="edit-o"/></span>*/}
                              {/*</span>*/}
                            {/*</div>*/}
                            {/*<ul>*/}
                              {/*<li>*/}
                                {/*<div className="li-div">*/}
                                  {/*<span className="ant-tree-switcher ant-tree-switcher-noop"></span>*/}
                                  {/*<span className="ant-tree-checkbox">*/}
                                {/*<span className="ant-tree-checkbox-inner"></span>*/}
                              {/*</span>*/}
                                  {/*<span title="母婴"*/}
                                        {/*className="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close">*/}
                                {/*<span className="ant-tree-title">母婴</span>*/}
                              {/*</span>*/}
                                  {/*<span className="caozuo">*/}
                                {/*<Icon type="plus-square-o" onClick={() => this.showModalmemberadd(true)}/>*/}
                                {/*<Icon type="minus-square-o" onClick={showConfirm}/>*/}
                                {/*<span onClick={() => this.showModalmemberedit(true)}><MyIcon type="edit-o"/></span>*/}
                              {/*</span>*/}
                                {/*</div>*/}
                                {/*<div className="li-div">*/}
                                  {/*<span className="ant-tree-switcher ant-tree-switcher-noop"></span>*/}
                                  {/*<span className="ant-tree-checkbox">*/}
                                {/*<span className="ant-tree-checkbox-inner"></span>*/}
                              {/*</span>*/}
                                  {/*<span title="培训"*/}
                                        {/*className="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close">*/}
                                {/*<span className="ant-tree-title">培训</span>*/}
                              {/*</span>*/}
                                  {/*<span className="caozuo">*/}
                                {/*<Icon type="plus-square-o" onClick={() => this.showModalmemberadd(true)}/>*/}
                                {/*<Icon type="minus-square-o" onClick={showConfirm}/>*/}
                                {/*<span onClick={() => this.showModalmemberedit(true)}><MyIcon type="edit-o"/></span>*/}
                              {/*</span>*/}
                                {/*</div>*/}
                              {/*</li>*/}
                            {/*</ul>*/}
                          {/*</li>*/}
                        {/*</ul>*/}
                      {/*</li>*/}
                    {/*</ul>*/}
                  {/*</li>*/}
                {/*</ul>*/}
              </div>
            </Col>
            <Col span={18}>
              {/*搜索*/}
              <div className="search-cont">
                <Row gutter={16}>
                  <Col span="5">
                    <Input placeholder="姓名/手机号" size="large"/>
                  </Col>
                  <Col span="5">
                    <Select placeholder="选择会员账号状态" size="large" allowClear="true">
                      <Option value="选择会员账号状态">选择会员账号状态</Option>
                      <Option value="启用">启用</Option>
                      <Option value="禁用">禁用</Option>
                    </Select>
                  </Col>
                  <Col span="5">
                    <Select placeholder="请选择职位" size="large" allowClear="true">
                      <Option value="请选择职位">请选择职位</Option>
                      <Option value="会长">会长</Option>
                      <Option value="副会长">副会长</Option>
                      <Option value="理事">理事</Option>
                      <Option value="会员">会员</Option>
                    </Select>
                  </Col>
                  <Col span="5">
                    <Select placeholder="请选择职位" size="large" allowClear="true">
                      <Option value="请选择职位">请选择职位</Option>
                      <Option value="基础功能">基础功能</Option>
                      <Option value="高级功能">高级功能</Option>
                    </Select>
                  </Col>
                  <div className="search-btncont search-btncontfr">
                    <Button size="large" type="primary">搜索</Button>
                  </div>
                </Row>
              </div>
              {/*列表按钮*/}
              <div className="search-cont2">
                <Button onClick={this.RightOrderAdd}>新增会员</Button>
              </div>
              {/*表格*/}
              <Table columns={columns} scroll={{x: 1300}} dataSource={memberList.toJS()} bordered
                     pagination={pagination}/>
            </Col>
          </Row>
          {/*分配*/}
          <Modal
            title="请选择要分配的职位"
            wrapClassName="vertical-center-modal"
            visible={this.state.Modalshouquan}
            onCancel={() => this.showModalshouquan(false)}
            okText="确定"
            cancelText="取消"
            width="400"
          >
            <div className="modal-max-height">
              <Row gutter={16}>
                <Col span={8}>
                  <Checkbox>超级功能</Checkbox>
                </Col>
                <Col span={8}>
                  <Checkbox>高级功能</Checkbox>
                </Col>
                <Col span={8}>
                  <Checkbox>高级功能</Checkbox>
                </Col>
              </Row>
              <Row gutter={16}>
                <Col span={8}>
                  <Checkbox>普通功能</Checkbox>
                </Col>
                <Col span={8}>
                  <Checkbox>普通功能</Checkbox>
                </Col>
                <Col span={8}>
                  <Checkbox>
                    <Tooltip placement="top" title="字数过多的情况下高级功能高级功能高级功能高级功能">
                      字数过多情况
                    </Tooltip>
                  </Checkbox>
                </Col>
              </Row>
              <Row gutter={16}>
                <Col span={8}>
                  <Checkbox>普通功能</Checkbox>
                </Col>
                <Col span={8}>
                  <Checkbox>普通功能</Checkbox>
                </Col>
                <Col span={8}>
                  <Checkbox>
                    <Tooltip placement="top" title="字数过多的情况下高级功能高级功能高级功能高级功能">
                      字数过多情况
                    </Tooltip>
                  </Checkbox>
                </Col>
              </Row>
              <Row gutter={16}>
                <Col span={8}>
                  <Checkbox>超级功能</Checkbox>
                </Col>
                <Col span={8}>
                  <Checkbox>高级功能</Checkbox>
                </Col>
                <Col span={8}>
                  <Checkbox>高级功能</Checkbox>
                </Col>
              </Row>
            </div>
          </Modal>
          {/*新增职位*/}
          <Modal
            title="新增职位"
            wrapClassName="vertical-center-modal"
            visible={this.state.Modalmemberadd}
            onCancel={() => this.showModalmemberadd(false)}
            okText="确定"
            cancelText="取消"
            width='350'
          >
            <div className="modal-add-cont">
              <Row gutter={16}>
                <Col span={6} className="text-r">
                  <div className="ant-form-item-label">
                    <label className="ant-form-item-required"><span className="span-left">职位名称</span></label>
                  </div>
                </Col>
                <Col span={18}>
                  <div className="ant-form-item-control has-error">
                    <Input size="large" placeholder="请输入职位名称"/>
                  </div>
                </Col>
                <Col span={24}>
                  <div className="error-tip"><Icon type="minus-circle-o" />错误提示信息</div>
                </Col>
              </Row>
            </div>
          </Modal>
          {/*编辑职位*/}
          <Modal
            title="编辑职位"
            wrapClassName="vertical-center-modal"
            visible={this.state.Modalmemberedit}
            onCancel={() => this.showModalmemberedit(false)}
            okText="确定"
            cancelText="取消"
            width='350'
          >
            <div className="modal-add-cont">
              <Row gutter={16}>
                <Col span={6} className="text-r">
                  <div className="ant-form-item-label">
                    <label className="ant-form-item-required"><span className="span-left">职位名称</span></label>
                  </div>
                </Col>
                <Col span={18}>
                  <div className="ant-form-item-control">
                    <Input size="large" placeholder="请输入职位名称" defaultValue="高级职位"/>
                  </div>
                </Col>
              </Row>
            </div>
          </Modal>
          {/*操作*/}
          <Modal
            title="操作"
            wrapClassName="vertical-center-modal"
            visible={this.state.Modalmembercaozuo}
            onCancel={() => this.showModalmembercaozuo(false)}
            okText="确定"
            cancelText="取消"
            width='350'
          >
            <div className="modal-caozuo">
              <Row gutter={16}>
                <Col span={8}>
                  <a href="javascript:void(0)" onClick={() => this.showModalmemberadd(true)}>
                    <Icon type="plus-square-o"/>
                    新增职位
                  </a>
                </Col>
                <Col span={8}>
                  <a href="javascript:void(0)" onClick={() => this.showModalmemberedit(true)}>
                    <MyIcon type="edit-o"/>
                    编辑职位
                  </a>
                </Col>
                <Col span={8}>
                  <a className="link-delete" href="javascript:void(0)" onClick={showConfirm}>
                    <Icon type="minus-square-o" />
                    删除职位
                  </a>
                </Col>
              </Row>
            </div>
          </Modal>
        </div>
      </div>
    )
  }
}